<template>
  <view class="create-order">
    <view class="p-3 order-form-wrap">
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="客户" prop="CustName">
          <u--input v-model="orderForm.CustName" disabled disabledColor="#ffffff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="电话" prop="Tel">
          <u--input v-model="orderForm.Tel" border="none" disabled disabledColor="#ffffff"></u--input>
        </u-form-item>
        <u-form-item label="联系人" prop="Contact">
          <u--input v-model="orderForm.Contact" border="none" disabled disabledColor="#ffffff"></u--input>
        </u-form-item>
        <u-form-item label="地址" prop="Addr" labelWidth="55">
          <u--input v-model="orderForm.Addr" disabled disabledColor="#ffffff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="来源" prop="BXType">
          <u--input v-model="orderForm.BXType" disabled disabledColor="#ffffff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="预约" prop="AppointmentTime">
          <u--input v-model="orderForm.AppointmentTime" disabled disabledColor="#ffffff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="充电桩" prop="HardItemName" borderBottom>
          <view class="info-view">{{ orderForm.HardItemName }} {{orderForm.HardItemStyle }}</view>
        </u-form-item>
        <u-form-item label="备注信息" prop="StatusName" borderBottom>
          <view class="info-view">{{ orderForm.Descr }}</view>
        </u-form-item>

      </u--form>
      <view class="sub-title formTitleRef_1">选择服务员工</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
       ref="form1">

        <template v-for="(item, index) in serviceList">
          <view :key="index">
            <u-form-item :label="'服务员工' + (index + 1)" :prop="'Employee' + (index + 1)" borderBottom
              @click="handleServicePick('Employee' + (index + 1))">
              <u--input v-model="orderForm['Employee' + (index + 1)]" disabled disabledColor="#ffffff"
                placeholder="选择服务员工" border="none">
              </u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
            <u-form-item label="提成" :prop="'VirtCharge' + (index + 1)" borderBottom>
              <u--input v-model.number="orderForm['VirtCharge' + (index + 1)]" disabledColor="#ffffff" placeholder="输入提成"
                border="none" type="digit" @blur="chargeSummation">
              </u--input>
            </u-form-item>
          </view>
        </template>
        <u-form-item label="服务提成" prop="Expense01" borderBottom>
          <u--input v-model.number="orderForm.Expense01" type="digit" disabledColor="#ffffff" placeholder="输入服务提成"
            border="none" disabled>
          </u--input>
        </u-form-item>
      </u--form>


      <u-button @click="handleOrderAdd" :customStyle="{marginBottom: '30rpx'}" color="#F65D30" shape="circle" text="确定派单"></u-button>
      <u-button v-if="orderForm.IsAss" @click="handleAssToNew" :customStyle="{marginBottom: '30rpx'}" plain color="#000FFF" shape="circle" text="转成待安排"></u-button>
      <u-button @click="handleOrderHit" :customStyle="{marginBottom: '30rpx'}" plain color="#06AE56" shape="circle" text="催一催"></u-button>

    </view>
    <u-popup :show="showSalesman" mode="center" :round="5">
      <view class="order-popup">
        <view class="popup-title">选择员工</view>
        <u-search bgColor="#eef0f6" color="#9faac0" placeholderColor="#9faac0" placeholder="请输入员工名称" :show-action="false"
          shape="square" searchIcon="" @search="handleEmployeeSearch" v-model="employeeParams.EmpName"></u-search>

        <view class="order-radio">
          <u-radio-group v-model="orderForm[currEmployee]" :borderBottom="true" placement="column" iconPlacement="right"
            activeColor="#F65D30" inactiveColor="#fff">
            <u-list @scrolltolower="scrolltoEmployeeLower" height="240">
              <u-list-item v-for="(item, index) in employeeList" :key="index">
                <u-radio :customStyle="{ marginBottom: '16px' }" :label="item.EmpName" :name="item.EmpName">
                </u-radio>
              </u-list-item>
            </u-list>
          </u-radio-group>
        </view>
        <view class="btns">
          <view class="mr-3 f-1">
            <u-button @click="() => (showSalesman = false)" :plain="true" color="#F65D30" shape="circle"
              text="取消"></u-button>
          </view>
          <view class="ml-3 f-1">
            <u-button @click="
              () => {
                orderForm[currEmployee] = '';
              }
            " :plain="true" color="#F65D30" shape="circle" text="清空"></u-button>
          </view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script src="./OrderAss.js"></script>

<style lang="scss">
.create-order {
  .create-order-tabs {
    background-color: #fff;
  }

  .sub-title {
    color: $s-manager-color;
    font-size: 28rpx;
    margin-bottom: 24rpx;
  }

  .info-view {
    text-align: right;
    width: 100%;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
  }

  ::v-deep .u-form-item__body__right__message {
    text-align: right;
  }

  .order-form-wrap {
    .order-form-single {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .order-form-title {
        color: #f43030;
        font-size: 30rpx;
        background-color: #fff7f5;
        padding-top: 24rpx;
        padding-bottom: 24rpx;
      }

      ::v-deep .u-textarea {
        border-color: transparent !important;
        padding: 20rpx 30rpx;
        border-radius: 0;
      }

      ::v-deep .u-textarea--disabled {
        background-color: #fff;
      }

      ::v-deep .u-upload__wrap {
        padding: 30rpx;
        border-radius: 16rpx;

        .u-upload__button {
          background-color: #fff7f5;

          .u-icon__icon {
            color: $s-manager-color !important;
            font-size: 80rpx !important;
            line-height: 80rpx !important;
          }
        }
      }
    }

    .order-form-block {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .service-staff {
        width: 108px;
        height: 28px;
        border-radius: 14px;
      }

      .justify-right {
        justify-content: right;
        width: 100%;
      }

      ::v-deep .uni-input-wrapper {
        .uni-input-input {
          text-align: right;
        }

        .input-placeholder {
          text-align: right;
          color: #808080;
        }
      }

      ::v-deep .u-form-item__body__left__content__label {
        color: #222;
        font-size: 30rpx;
      }
    }
  }

  .order-popup {
    width: 600rpx;
    padding: 25rpx 30rpx;

    .popup-title {
      color: #333;
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }

    ::v-deep .uni-input-wrapper {
      .uni-input-input {
        text-align: left;
      }

      .input-placeholder {
        text-align: left;
        color: #808080;
      }
    }

    .popup-tip {
      margin-top: 20rpx;
      color: #555;
      font-size: 22rpx;
    }

    .btns {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 20rpx 0;
      margin-top: 30rpx;
      background-color: #fff;

      ::v-deep .u-button {
        margin: 0;
      }
    }

    .order-radio {
      padding: 20rpx;
      margin-top: 30rpx;
      // ::v-deep .uicon-checkbox-mark{
      // 	color:#F65D30 !important;
      // }
    }
  }
  .btns {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	padding: 20rpx 0;
	margin-top: 30rpx;

	::v-deep .u-button {
		margin: 0;
	}
}
}
</style>
